import { useEffect, useState } from 'react'
import { Form, Button, Col, Row, Input, Select, message } from 'antd';
const { Option } = Select;
import './index.css'
import goodsModel from '../../model/goodsModel';
import { useDispatch, useSelector } from 'react-redux';
import { initUser } from '../../action/userAction';

export interface goodType {
    id?: number;
    code: string;
    name: string;
    price: string;
    merchants: string;
    category: string;
}


export default function detail(props: any) {

    const dispatch = useDispatch();
    const userInfo = useSelector((state: any) => state.userInfo.info);
    const [editMode, setEditMode] = useState(false);

    //初始化
    const [form] = Form.useForm();

    const handleFormFinish = (value: goodType) => {
        if (editMode) {
            goodsModel.put(value).then((res) => {
                if (res.status === 200) {
                    message.success('修改成功')
                    props.history.push("/live");
                }
            })
        } else {
            goodsModel.post(value).then((res) => {
                if (res.status === 201) {
                    message.success('新增成功')
                    props.history.push("/live");
                }
            })
        }
    }

    useEffect(() => {
        const existInfo: any = window.localStorage.getItem("userinfo");
        if (!Object.keys(userInfo).length && !existInfo) {  // 全局的没有  本地缓存的也没有
            props.history.push("/");
        } else {                 //   说明用户登录了
            const cloneExistInfo = JSON.parse(existInfo);
            dispatch(initUser(cloneExistInfo));//数据更新了
        }

        const id = Number(location.hash?.split('?')[1]?.split("=")[1]);
        if (id) {
            setEditMode(true)
            goodsModel.query({ id }).then((res) => {
                form.setFieldsValue(res.data[0])
            })
        } else {
            const existInfo: any = window.localStorage.getItem("userinfo");
            const cloneExistInfo = JSON.parse(existInfo);
            form.setFieldsValue({ merchants: cloneExistInfo.username })
        }
    }, [])

    return (
        <div className="de">
            <div className="de_header">
                <Form layout="vertical" hideRequiredMark form={form} onFinish={(value) => { handleFormFinish(value) }}>

                    <Row gutter={16}>
                        <Col span={12}>
                            {editMode && <Form.Item
                                key={"id"}
                                label={"ID"}
                                name={"id"}
                                rules={[{ required: true, message: '请输入id' }]}
                            >
                                <Input placeholder="请输入id" disabled />
                            </Form.Item>}
                            {!editMode && <Form.Item
                                key={"id"}
                                label={"ID"}
                                name={"id"}
                                rules={[{ required: false, message: '新增不需要输入id' }]}
                            >
                                <Input placeholder="新增不需要输入id" disabled />
                            </Form.Item>}
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                key={"code"}
                                label={"药品代码"}
                                name={"code"}
                                rules={[{ required: true, message: '请输入药品代码' }]}
                            >
                                <Input placeholder="请输入药品代码" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                key={"name"}
                                label={"药品名"}
                                name={"name"}
                                rules={[{ required: true, message: '请输入药品名' }]}
                            >
                                <Input placeholder="请输入药品名" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                key={"price"}
                                label={"价格"}
                                name={"price"}
                                rules={[{ required: true, message: '请输入价格' }]}
                            >
                                <Input type='number' placeholder="请输入价格" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                key={"merchants"}
                                label={"商家"}
                                name={"merchants"}
                                rules={[{ required: true, message: '请输入商家' }]}
                            >
                                <Input placeholder="请输入商家" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                key={"category"}
                                label={"类别"}
                                name={"category"}
                                rules={[{ required: true, message: '请输入类别' }]}
                            >
                                <Input placeholder="请输入类别" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Button type="primary" htmlType="submit" >
                        {editMode ? '更新' : '提交'}
                    </Button>
                </Form>
            </div>

        </div>
    )
}



